<style lang="scss">
@import "./index.scss";
@import "./lesson.scss";

$cls: '.z-page-lesson-list';
#{$cls} {
  image-rendering: pixelated;
  background-color: #f3f8ff;

  .chart {
    height: 230px;
  }

  &__banner {
    position: relative;
    background-size: 100%;
    @include aspect-ratio(1362, 170, '#{$cls}__banner-content');
    margin-bottom: 10px;
  }

  &__logo {
    position: absolute;
    left: 12px;
    top: 12px;
    //background-size: 100%;
    //@include aspect-ratio(112, 30, '#{$cls}__logo-content')
  }

  &__title {
    height: 37px;
    font-size: 36px;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 1;
    top: 44px;
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
  }

  &__detail {
    width: 170px;
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    top: 106px;
    cursor: pointer;
  }

  &__actions {
    right: 20px;
    top: 20px;
    position: absolute;
    font-size: 14px;
    font-weight: 400;
    color: #FFFFFF;
    z-index: 11;
  }

  &__logoout {
    cursor: pointer;
  }

  &__header-gutter {
    display: inline-block;
    width: 1px;
    height: 14px;
    background-color: #fff;
    vertical-align: top;
    margin-right: 5px;
    margin-left: 3px;
    transform: translateY(3px);
  }

  .z-crud-table__change-view {
    display: none !important;
  }

  .z-crud-table__actions {
    background-color: #fff;
    box-shadow: 0px 2px 5px 0px rgba(111, 128, 146, 0.1);
    border-radius: 4px;
    margin-bottom: 10px;
  }

  .z-page-lesson-list__tabs {
    //font-size: 14px;
    sp-tab {
      font-size: 14px;
      padding-bottom: 5px;
      padding-top: 5px;
    }

    margin-left: 10px;
  }

  .z-crud-table__hight_sef {
    display: none;
  }

  .z-crud-table__buttons-left {
    display: none !important;
  }

  .z-table {
    background-color: transparent;
  }

  .z-table__page {
    display: none;
  }

  .inf-item {
    padding: 5px;
    background: #FFFFFF;
    box-shadow: 0px 2px 5px 0px rgba(111, 128, 146, 0.1);

    &__img {
      //@include aspect-ratio(204, 168, '.inf-item__img-con');
      background-color: #eee;
      margin-bottom: 10px;
    }

    &__content {
      color: #848484
    }

    font-size: 12px;
  }

  .z-com-grid {
    height: auto;
  }

  [role=listitem] {
    margin-bottom: 15px;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.z-page-lesson-list__popper {
  padding: 5px;
  font-size: 12px;
  line-height: 20px;
}


.z-page-lesson-list__body {
  padding: 10px;
  box-sizing: border-box;
}

</style>

<template>
  <div class="z-page-lesson-common z-page-lesson-list">
    <zw-row
        class="z-page-lesson-list__body"
        style="grid-template-columns: 230px 1fr"
        :id="item_id"
        gutter="12px">
      <div class="z-page-lesson-common__card">
        <z-tree class="z-case-tree" :data="treeData"
        ></z-tree>
      </div>
      <div >
        <z-crud-table
            :request="obj.request"
            :obj="obj.tableOption"
            :add-com="EditCom"
            :detail-com="EditCom"
            :edit-com="EditCom"
            v-if="inited && EditCom"
            ref="curd"
        >
          <template #z-crud-table__table__content_after_search="scope">
            <el-button style="margin-right: 10px" type="primary" @click="scope.table__add">创建课程</el-button>
          </template>
          <template #z-crud-table__table__action-con_beforeend="scope">
            <zw-tabs class="z-tabs z-page-lesson-list__tabs" :selected="1">
              <z-fragment v-for="(tab, index) in tabs">
                <sp-tab :label="tab" :value="''+index"></sp-tab>
                <sp-tab-panel :value="''+index"></sp-tab-panel>
              </z-fragment>
            </zw-tabs>

          </template>
          <template #content="scope">1111
          </template>
        </z-crud-table>
      </div>
    </zw-row>
  </div>
</template>

<script>
import {ZPageMixin} from "@/zpkgs/components/z-pages/ZPageMixin";
import {CurdHelper} from "@/main";

export default {
  name: 'ZPageLessonList',
  components: {},
  mixins: [
    ZPageMixin
  ],
  data() {
    return {
      inited: false,
      obj: {},
      item_id: ZY.rid(),
      tabs: [
        '普通课程',
        '普通专题'
      ],
      EditCom: null,
      treeData: [
        {
          label: '一级 1',
        },
        {
          label: '一级 2',
          children: [
            {
              label: '二级 2-1',
            },
            {
              label: '二级 2-2',
            }
          ]
        },
      ]
    }
  },
  mounted() {
    this.EditCom = CurdHelper.defDialogView( {
      content: `<div>
<template>1111</template>
</div>`,
      dialogProps: {
        class: 'EditCom' + ZY.rid()
      },
    })

    setTimeout(() => {
      this.obj = {
        request: window.Req,
        tableOption: {
          defaultUrl: '/api/list',
          viewProps: {

          }
        }
      }
      this.inited = true
    }, 30)
  }
}
</script>
